<template>
  <view class="conter">
    <cc-goback title='组织排名' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="head_a">
        <view class="head_img1">
          <image src="../../static/organization_ranking/xiala.png" mode=""></image>
        </view>
        <view class="head_word">
         <ms-dropdown-menu>
            <ms-dropdown-item @input="mileage" v-model="value" :list="dropdownlist"></ms-dropdown-item>
          </ms-dropdown-menu>
          <!-- 小时排名 -->
        </view>
        <!-- <view class="head_img2">
          <image src="../../static/organization_ranking/xl.png" mode=""></image>
        </view> -->
      </view>
      <view class="head_b">
        <view class="head_bb" :class="{head_ba:falg==0}" @click="cheang">
          厂界
        </view>
        <view class="head_bb" :class="{head_ba:falg==1}" @click="cheang_a">
          排口
        </view>
      </view>
    </view>
    <view class="detail">
      <view class="detail_word">
        徽州区组织排名详图
      </view>
      <view class="box">
        <echarts ref="echat" :option="option" style="height: 800px;" @click="echartsClick"></echarts>
      </view>
    </view>
  </view>
</template>

<script>
   import echarts from '@/components/echarts/echarts.vue';
   import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
   import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
   import dateFtt from '@/util/dateFtt.js'
  export default {
    components: {
      msDropdownMenu,
      msDropdownItem,
      dateFtt
    },
    data() {
      return {
        // 排名列表
        rankingList:'',
        date_h:'',
        date_d:'',
        date_m:'',
        mileage_num: 0,
        value: 0,
        text:'',
        dropdownlist: [{
            text: '小时排名',
            value: 0,
          }, {
            text: '日排名',
            value: 1,
          },
          {
            text: '月排名',
            value: 2,
          },
          {
            text: '自定义',
            value: 4
          }
        ],
        option:{
            dataset: {
                source: 
                [
                    // ['score', 'amount', 'product'],
                    // [68.1, 10, '花花'],
                    // [68.1, 15, '黄皮子'],
                    // [68.1, 18, '爱丽丝'],
                    // [68.1, 20, '酆韵'],
                    // [68.1, 23, '和凡'],
                    // [68.1, 28, '蓝康德'],
                    // [68.1, 30, '西黛'],
                    // [32.7, 35, '昌力'],
                    // [32.7, 40, '康佳化工'],
                    // [32.7, 50, '永利']
                ]
            },
            grid: {containLabel: true},
            xAxis: {
              name: '',
              position: 'top',
            },
            yAxis: {
              type: 'category',
               inverse: true,
            },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#68E0CF','#209CFF','#EC8C69','#ED6E8C' ]
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        },
        falg: 0,
      }
    },
    onLoad() {
      // 格式化时间
        // 时
        this.date_h =this.dateFtt('yyyy-MM-dd hh',new Date())
        // 日
        this.date_d =this.dateFtt('yyyy-MM-dd',new Date())
        // 月
        this.date_m =this.dateFtt('yyyy-MM',new Date())
        // console.log('date', this.date_h,this.date_d,this.date_m)
        this.getranking(this.date_h)
    },
    methods: {
      // 企业排名
      getranking(date){
        	this.$http.get('/envirnment-air/analysis/enterpriseRank',{
        		date:date,
        		dateType:this.mileage_num,
            type:this.falg,
        	}).then(res=>{
        		if(res.code == '00000'){
        		console.log('排名',res)
            const List = []
            res.data.forEach((item,index)=>{
              List.push(
                   [item.value,item.value,item.enterpriseName]
              )
            })
            List.unshift(
             ['score', 'amount', 'product']
            )
            this.option.dataset.source = List
             // console.log('123',this.option.dataset.source)
             this.$refs.update(this.option)
        		}
        	})
      },
      // 获取时间并赋值
      mileage(e) {
        this.mileage_num = e.value
        // console.log(this.mileage_num);
        if(this.mileage_num==0){
          this.getranking(this.date_h)
        }
        if(this.mileage_num==1){
          this.getranking(this.date_d)
        }
        if(this.mileage_num==2){
          this.getranking(this.date_m)
        }
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      cheang() {
        this.falg = 0
         this.getranking()
      },
      cheang_a() {
        this.falg = 1
        this.getranking()
      },
    }
  }
</script>

<style lang="scss">
  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .qiun-charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #FFFFFF;
    padding: 25upx;
  }

  .charts-rotate {
    width: 700upx;
    height: 1100upx;
    background-color: #FFFFFF;
  }

  .conter {
    background-color: #F7F7F7;
    // height: 1452rpx;
    overflow: hidden;
  }

  .head {
    display: flex;
    justify-content: space-between;
    margin: 10rpx 0 25rpx;
  }

  .head_a {
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 290rpx;
    height: 66rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 1rpx solid #EAEAEA;
    margin: 20rpx 0 0 24rpx;
  }

  .head_word {
    width: 230rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .head_ba {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #4EA1FF;
    border-radius: 8rpx;
  }

  .head_bb {
    width: 191rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    text-align: center;
    // background: #fff;
  }

  .head_b {
    display: flex;
    align-items: center;
    width: 382rpx;
    height: 66rpx;
    background-color: #fff;
    margin: 20rpx 24rpx 0 0;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
  }

  .head_img1 {
    width: 24rpx;
    height: 24rpx;
    margin: 0 10rpx 15rpx 20rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .head_img2 {
    width: 22rpx;
    height: 12rpx;
    margin: 0 0 40rpx 108rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .head_img3 {
    width: 28rpx;
    height: 28rpx;
    margin: 0 10rpx 0 19rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .head_img4 {
    width: 22rpx;
    height: 12rpx;
    margin: 0 0 40rpx 50rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .detail {
    width: 704rpx;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
    border-radius: 8rpx;
  }

  .detail_word {
    margin: 30rpx 0 0 30rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
</style>
